<template>
  <div :id="detail.identifier" :style="{
        fontSize: detail.style.fontSize + 'px',
        fontFamily: detail.style.fontFamily,
        color: detail.style.foreColor,
        textAlign: textAlign,
        lineHeight: lineHeight + 'px',
    }">
    {{ dateYear }} {{ dateWeek }} {{ dateDay }}
    <div></div>
  </div>
</template>
<script>

import BaseView from './View';
import {formatTime} from '../../../api/zutai/utils'
//动作特效  @click="handleClick('滑动')"
import {getAnimate, rotateAnimate, scaleAnimate, translateAnimate} from "../util/animate";
import anime from 'animejs'

export default {
  name: 'view-text',
  extends: BaseView,
  data() {
    return {
      timing: null,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      animation: null,
    }
  },
  mounted() {
    this.getTimer();
    this.timeFn()
    //this.listAnimate();
  },
  methods: {
    handleClick(lable) {
      let domId = document.getElementById(this.detail.identifier)
      if (lable == '旋转') {
        rotateAnimate(domId, 1000, true, false);
      } else if (lable == '闪烁') {
        scaleAnimate(domId, 1500, true, true);
      } else if (lable == '滑动') {
        let translates = [
          {translateX: 40},
          {translateX: 80},
          {translateX: 120},
          {translateX: 80},
          {translateX: 40},
          {translateX: 0},
          {translateX: -40},
          {translateX: -80},
          {translateX: -120},
          {translateX: -80},
          {translateX: -40},
          {translateX: 0},
        ]
        translateAnimate(domId, translates, 3000, true, true);
      } else {
        getAnimate().set(domId, {
          translateX: function () {
            return anime.random(50, 250);
          },
          rotate: function () {
            return anime.random(0, 360);
          },
        })
      }
    },
    getTimer() {
      this.dateDay = formatTime(new Date(), 'HH:mm:ss')
      this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
      this.dateWeek = this.weekday[new Date().getDay()]
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH:mm:ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
  }
}
</script>
